<template>
    <div class="poa">
        <RouterView v-slot="{ Component }">
            <transition name="router">
                <component :is="Component" />
            </transition>
        </RouterView>
        <Home_page_Footer @text_router='text_router' />
    </div>
</template>
<script setup>
import { defineAsyncComponent } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const Home_page_Footer = defineAsyncComponent(() => import('../components/home_page/home_page_foot.vue'))
function text_router(path) {
    router.push({
        path: path,
    })
}
</script>       
<style scoped lang="scss">
@function r($v) {
    @return $v / (390 /10rem)
}

.router-enter-active {
    animation: shadow 0.3s ease;
}

.router-leave-active {
    animation: shadow 0.3s ease reverse;
}

@keyframes shadow {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
</style>